<script setup lang="ts">
import { onMounted } from "vue";

defineProps<{ msg: string }>();
onMounted(() => {
  // 获取本地音视频流
  async function getLocalStream(constraints: MediaStreamConstraints) {
    // 获取媒体流
    const stream = await navigator.mediaDevices.getUserMedia(constraints);

    // 获取screen媒体流
    // const stream = await navigator.mediaDevices.getDisplayMedia(constraints)
    // 将媒体流设置到 video 标签上播放
    playLocalStream(stream);
  }

  // 播放本地视频流
  function playLocalStream(stream: MediaStream) {
    const videoEl = document.getElementById("localVideo") as HTMLVideoElement;
    videoEl.srcObject = stream;
  }

  getLocalStream({
    audio: false,
    video: true,
  });

  function handleError(error: any) {
    alert("摄像头无法正常使用，请检查是否占用或缺失");
    console.error(
      "navigator.MediaDevices.getUserMedia error: ",
      error.message,
      error.name
    );
  }

  /**
   * @author suke
   * device list init
   */
  function initInnerLocalDevice() {
    const that = this;
    var localDevice = {
      audioIn: [],
      videoIn: [],
      audioOut: [],
    };
    let constraints = { video: true, audio: true };
    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
      console.log("浏览器不支持获取媒体设备");
      return;
    }
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function (stream) {
        stream.getTracks().forEach((trick) => {
          trick.stop();
        });
        // List cameras and microphones.
        navigator.mediaDevices
          .enumerateDevices()
          .then(function (devices) {
            devices.forEach(function (device) {
              let obj = {
                id: device.deviceId,
                kind: device.kind,
                label: device.label,
              };
              if (device.kind === "audioinput") {
                if (
                  localDevice.audioIn.filter((e) => e.id === device.deviceId)
                    .length === 0
                ) {
                  localDevice.audioIn.push(obj);
                }
              }
              if (device.kind === "audiooutput") {
                if (
                  localDevice.audioOut.filter((e) => e.id === device.deviceId)
                    .length === 0
                ) {
                  localDevice.audioOut.push(obj);
                }
              } else if (device.kind === "videoinput") {
                if (
                  localDevice.videoIn.filter((e) => e.id === device.deviceId)
                    .length === 0
                ) {
                  localDevice.videoIn.push(obj);
                }
              }
            });
          })
          .catch(handleError);
      })
      .catch(handleError);
    return localDevice;
  }

  console.log(initInnerLocalDevice());
});
</script>

<template>
  <h1>{{ msg }}</h1>

  <video id="localVideo" autoplay playsinline muted></video>
</template>